<template>
  <div>
    <a-layout style="padding: 24px 0; background: #fff">
      <a-layout-sider breakpoint="lg" collapsedWidth="0" width="200" style="background: #fff;">
        <a-affix :offset-top="top">
          <div style="max-height: 100vh;overflow-y: auto;">
            <a-menu mode="inline" v-model="current" style="min-height: 100%;">
              <a-menu-item key="home">
                <router-link to="/book">
                  <a-icon type="bank" />
                  <span>全部词条</span>
                </router-link>
              </a-menu-item>
              <a-menu-item :key="a.title" v-for="a in articles">
                <router-link :to="'/book?key=' + a.title">
                  <span>{{ a.title }}</span>
                </router-link>
              </a-menu-item>
            </a-menu>
          </div>
        </a-affix>
      </a-layout-sider>
      <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
        <a-spin :spinning="loading">
          <div v-if="current[0] === 'home'">
            <div style="color: #1890FF;font-size: 2em;">地震知识库</div>
            <br>
            <a-input-search placeholder="请输入关键词" v-model="searchKey"/>
            <br />
            <br>
            <a-row :gutter="[16,16]">
              <a-col :xs="24" :sm="12" :md="8" :lg="6" :xxl="4" :key="a.id" v-for="a in searchArticles">
                <router-link :to="'/book?key=' + a.title">
                  <a-card hoverable>
                    <div v-html="a.html"></div>
                  </a-card>
                </router-link>
              </a-col>
            </a-row>
            <a-empty v-if="searchArticles.length === 0"/>
          </div>
          <div v-if="knowledge" class="article">
            <div v-html="knowledge.html"></div>
            <div class="explanation">
              数据来源于 <a :href="knowledge.sourceUrl" target="_blank">百度百科</a>
            </div>
          </div>
          <div v-if="current[0] !== 'home' && !knowledge" style="height: 500px"></div>
        </a-spin>
      </a-layout-content>
      <a-layout-sider breakpoint="lg" collapsedWidth="0" width="200" style="background: #fff" v-if="knowledge">
        <a-affix :offset-top="top">
        <div v-if="knowledge" style="margin: 5px 5px 5px 0;font-weight: bold;">目录</div>
        <a-anchor :affix="false">
          <a-anchor-link :href="'#' + h1.href" :title="h1.title" v-for="(h1, m) in knowledge.catalogue || []" v-bind:key="m">
            <a-anchor-link :href="'#' + h2.href" :title="h2.title" v-for="(h2, n) in h1.children" v-bind:key="n"/>
          </a-anchor-link>
        </a-anchor>
        </a-affix>
      </a-layout-sider>
    </a-layout>
    <a-back-top />
  </div>
</template>

<script>
export default {
  name: "book",
  data() {
    return {
      current: ['home'],
      searchKey: '',
      articles: [],
      knowledge: null,
      loading: false,
      key: null,
    }
  },
  methods:{
    loadData(){
      this.current = [this.$route.query.key || 'home']
      this.key = this.$route.query.key || false
      let that = this
      that.loading = true
      this.axios.post('/cli/api/data/AllKnowledge', {}).then(response => {
        that.articles = response.list.map(x=>{
          x.imgs = JSON.parse(x.imgs)
          return x
        })
        that.loading = false
      }).catch(function () {
        that.$message.error('数据加载失败')
        that.loading = false
      })
      if(this.key){
        let that = this
        that.loading = true
        this.axios.post('/cli/api/data/Knowledge?key=' + this.key, {}).then(response => {
          response.knowledge.catalogue = JSON.parse(response.knowledge.catalogue)
          response.knowledge.imgs = JSON.parse(response.knowledge.imgs)
          that.knowledge = response.knowledge
          that.loading = false
        }).catch(function () {
          that.$message.error('数据加载失败')
          that.loading = false
        })
      }else {
        this.knowledge = null
      }
    }
  },
  computed:{
    searchArticles(){
      let page = this
      if(this.searchKey){
        return this.articles.filter(x=>x.title.indexOf(page.searchKey) >= 0).map(y=>{
          y.html = y.title.replace(page.searchKey, '<span style="color: #1890FF">' + page.searchKey + '</span>')
          return y
        })
      }else {
        return this.articles.map(x=>{
          return {title: x.title, html:x.title}
        })
      }
    }
  },
  watch:{
    $route(){
      this.loadData()
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style>
.article h1{
  color: #1890FF;
  margin: 0 0 10px 0;
}

.article .pinyin{
  margin:0 1em 1em 1em;
}

.article h2{
  border-left: 5px solid #64b6ff;
  padding-left: 5px;
  margin: 25px 0 10px 0;
}

.article h1,h2,h3{
  font-weight: bold;
}

.article h3{
  margin: 25px 0 10px 1em;
}

.article table{
  margin: 0 1em;
}

.article td{
  padding: 5px 30px 5px 0;
}

.article p{
  margin: 0 1em 1em 1em;
  text-indent: 2em;
}

.article img{
  margin:0 1em;
  max-width: 100%;
}

.article .explanation{
  text-align: center;
  margin: 50px 0 10px 0;
}

</style>